<template>
	<view class="address-admin">
		<NavBar title="地址管理" :isBack="true"></NavBar>
		<view class="content">
			<up-empty mode="address" v-if="!addressDataList.length"></up-empty>
			<view class="item" v-for="(item, index) in addressDataList" :key="index">
				<view class="user-msg">
					<view class="name">{{ item.name }}</view>
					<view>{{ item.mobile }}</view>
				</view>
				<view class="address">{{ item.address }}</view>
				<view class="action-bar">
					<view class="right-area">
						<image :src="item.status ? '/static/my/uncheck.png' : '/static/my/check.png'"></image>
						默认地址
					</view>
					<view class="left-area">
						<view class="edit" @click="handleEdit(item)">
							<image src="@/static/my/edit.png"></image>
							编辑
						</view>
						<view @click="handleRemove(item.id)">
							<image src="@/static/my/delete.png"></image>
							删除
						</view>
					</view>
				</view>
			</view>
			<view class="add-btn" @click="handleAdd">
				<image src="@/static/my/add.png"></image>
				添加地址
			</view>
		</view>

	</view>
</template>

<script setup>
import { getAddress, deladdress } from '@/api/address.js'
import { onMounted, reactive, toRefs } from 'vue'
import { onShow } from '@dcloudio/uni-app'
const state = reactive({
	addressDataList: []
})
function handleAdd () {
	uni.navigateTo({
		url: "/pages/my/addAddress"
	})
}
function handleEdit (item) {
	uni.navigateTo({
		url: "/pages/my/editAddress?addressInfo=" + JSON.stringify(item)
	})
	console.log(15646);
}

async function handleRemove (id) {
	uni.showModal({
		title: '提示',
		content: '你确定要删除吗',
		success: async function (res) {
			if (res.confirm) {
				const res = await deladdress({ id })
				if (res.code) {
					uni.showToast({ title: "删除成功" })
					getAddressDataList()
				}
			} else if (res.cancel) {
				console.log('取消');
			}
		}
	});

}
// 获取地址列表
async function getAddressDataList () {
	uni.showLoading({ title: '加载中' });
	const res = await getAddress()
	state.addressDataList = res.data
	uni.hideLoading()
}
onShow(() => {
	getAddressDataList()
})
const { addressDataList } = toRefs(state)
</script>

<style lang="scss" scoped>
.address-admin {
	.content {
		padding: 36rpx 36rpx 100rpx;
		position: relative;
		z-index: 1;

		.item {
			padding: 29rpx 35rpx 29rpx 27rpx;
			width: 678rpx;
			height: 235rpx;
			background: #FFFFFF;
			border-radius: 22rpx;
			box-sizing: border-box;
			background-color: #fff;
			margin-bottom: 36rpx;

			.user-msg {
				display: flex;
				align-items: center;
				font-weight: bold;
				font-size: 26rpx;
				color: #333333;
				margin-bottom: 14rpx;

				.name {
					margin-right: 26rpx;
				}
			}

			.address {
				font-weight: 500;
				font-size: 26rpx;
				color: #999999;
				border-bottom: 1rpx solid #F5F5F5;
				padding-bottom: 20rpx;
			}

			.action-bar {
				display: flex;
				justify-content: space-between;
				margin-top: 24rpx;

				.right-area {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #58DBCF;

					image {
						width: 30rpx;
						height: 30rpx;
						margin-right: 22rpx;
					}
				}

				.left-area {
					display: flex;
					align-items: center;
					margin-top: 15rpx;

					view {
						display: flex;
						align-items: center;
						font-size: 24rpx;
						color: #999999;
					}

					image {
						width: 24rpx;
						height: 24rpx;
						margin-right: 13rpx;
					}

					.edit {
						margin-right: 50rpx;
					}
				}
			}
		}

		.add-btn {
			margin: 0 auto;
			margin-top: 68rpx;
			width: 648rpx;
			height: 66rpx;
			line-height: 66rpx;
			text-align: center;
			border-radius: 500rpx;
			border: 1rpx solid #58DBCF;
			font-weight: bold;
			font-size: 30rpx;
			color: #58DBCF;

			image {
				width: 26rpx;
				height: 26rpx;
			}
		}
	}

}
</style>